<div class="ui grid">
    <div class="ui row">
      <div class="six wide column">
          <h3>{{ 'project_pipelines_list' | translate }}</h3>
      </div>
      <div class="four wide column centered">
        <a class="ui blue button" [routerLink]="['./pipeline']" [class.disabled]="project.permission < 7">{{ 'pipeline_create' | translate }}</a>
      </div>
      <div class="right aligned six wide column">
          <app-input-autofocus [(model)]="filter"></app-input-autofocus>
      </div>
    </div>

    <div class="ui row">
        <div class="ui sixteen wide column">
          <div *ngIf="project.pipeline_names && project.pipeline_names.length > 0;then pipelines;else nopipelines"></div>
            <ng-template #pipelines>
              <div class="ui stackable four cards">
                  <a [routerLink]="['./pipeline', pip.name]" class="ui link card" *ngFor="let pip of filteredPipelines">
                      <div class="content">
                          <div class="header">
                            <span [innerText]="pip.name"></span>
                            <app-warning-mark-list [warnings]="warnMap?.get(pip.name)"></app-warning-mark-list>
                          </div>
                          <div class="meta" *ngIf="pip.description">
                              <span [innerText]="pip.description.slice(0, 90)"></span><span *ngIf="pip.description.length > 90">...</span>
                          </div>
                          <div class="meta" *ngIf="!pip.description" [innerText]="'common_no_description' | translate"></div>
                      </div>
                  </a>
              </div>
            </ng-template>
            <ng-template #nopipelines>
              <div class="ui segment">
                <span>{{ 'project_no_pipeline' | translate }}</span>
              </div>
            </ng-template>
        </div>
      </div>
</div>
